/*************************************************
* --- Reset (used for all w2ui widgets)
* --- The reset is needed to coexist with other CSS
* --- on the same page (for example bootstrap)
*/

.w2ui-reset {
    .box-sizing;
    font-family: @main-font-family;
    font-size: 12px;
     * {
        line-height: 100%;
        .box-sizing();
        margin: 0px;
        padding: 0px;
        // do not include any font-* properties
    }
    table {
        max-width: none;
        background-color: transparent;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
    }
    table tr th, table tr td {
        font-family: @main-font-family;
        font-size: 12px;
    }
    input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
    select, textarea {
        display: inline-block;
        width: auto;
        height: auto;
        vertical-align: baseline;
        padding: 6px;
        margin: 0;
        font-size: 12px;
        background-color: @input-background-color;
        border: @input-border;
        &:focus {
            background-color: white;
        }
    }
    select {
        padding: 5px;
        height: 26px;
        font-size: 12px;
    }
}

.w2ui-centered {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.w2ui-disabled,
.w2ui-readonly {
    background-color: #f1f1f1;
    color: #777;
}

input.w2ui-focus:not(button),
textarea.w2ui-focus,
select.w2ui-focus,
div[contenteditable].w2ui-focus {
    outline-style: auto;
    outline-color: @input-focus-outline-color;
}


/*************************************************
* ---- Input Controls ----
*/

input[type=button].w2ui-input {
    .sys-button;
    &:hover { .sys-button-hover; }
    &:active { .sys-button-active; }
}

select.w2ui-input:focus,
div.w2ui-input:focus {
    outline-color: @input-focus-outline-color;
}

input:not([type=button]):not([type=submit]).w2ui-input,
textarea.w2ui-input {
    padding: 6px;
    border: @input-border;
    border-radius: 3px;
    color: @input-color;
    background-color: @input-background-color;
    line-height: normal;
    &:focus {
        outline-color: @input-focus-outline-color;
        background-color: white;
    }
    &:disabled, &[readonly] {
        background-color: #f1f1f1;
        color: #777;
    }
}

select.w2ui-input {
    color: @input-color;
    padding: 0px 20px 0px 7px;
    line-height: 1.8;
    border-radius: 3px;
    border: @input-border;
    -webkit-appearance: none;
    background-image: url(''),
                      linear-gradient(to bottom, #f8f8f8 20%, #f8f8f8 50%, #f8f8f8 52%, #f8f8f8 100%);
    background-size: 17px 6px, 100% 100%;
    background-position: right center, left top;
    background-repeat: no-repeat, no-repeat;
}

.w2ui-icon-expand {
    &:before {
        position: relative;
        top: 1px;
        left: 1px;
        content: ' ';
        width: 5px;
        height: 5px;
        border: 2px solid rgba(150, 150, 150, 0.8);
        border-bottom: 0;
        border-left: 0;
        transform: rotateZ(45deg);
    }
}

.w2ui-icon-collapse {
    &:before {
        position: relative;
        top: -1px;
        left: 3px;
        content: ' ';
        width: 5px;
        height: 5px;
        border: 2px solid rgba(150, 150, 150, 0.8);
        border-bottom: 0;
        border-left: 0;
        transform: rotateZ(135deg);
    }
}

/* On/Off switch */

input[type="checkbox"].w2ui-toggle {
    position: absolute;
    opacity: 0;
    width: 46px;
    height: 22px;
    padding: 0px;
    margin: 0px;
    margin-left: 2px;
    &:focus {
        box-shadow: 0px 0px 1px 2px #a8cfff;
    }
    & + div {
        display: inline-block;
        width: 46px;
        height: 22px;
        border: 1px solid #bbb;
        border-radius: 30px;
        background-color: #eee;
        transition-duration: .3s;
        transition-property: background-color, box-shadow;
        box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.4);
        margin-left: 2px;
        margin-top: 3px;
    }
    &.w2ui-small {
        width: 30px;
        height: 23px;
    }
    &.w2ui-small + div {
        width: 30px;
        height: 16px;
        margin-top: 5px;
    }

    &:focus + div {
        box-shadow: 0px 0px 3px 2px #91baed;
    }

    &:disabled + div {
        opacity: 0.3;
    }

    /* Knob */
    & + div > div {
        float: left;
        width: 22px;
        height: 22px;
        border-radius: inherit;
        background: #f5f5f5;
        transition-duration: 0.3s;
        transition-property: transform, background-color, box-shadow;
        box-shadow: 0px 0px 1px rgba(50, 50, 50, 1), 0 0 0 1px rgba(200, 200, 200, 0.6);
        pointer-events: none;
        margin-top: -1px;
        margin-left: -1px;
    }

    &.w2ui-small + div > div {
        width: 16px;
        height: 16px;
    }

    &:checked + div > div {
        transform: translate3d(24px, 0, 0);
        background-color: #ffffff;
    }
    &.w2ui-small:checked + div > div {
        transform: translate3d(14px, 0, 0);
    }

    &:focus {
        outline: none;
    }

    /*  Blue */
    &:checked + div {
        border: 1px solid #206FAD;
        box-shadow: inset 0 0 0 12px #35A6EB;
    }

    &:checked:focus + div {
        box-shadow: 0px 0px 3px 2px #91baed, inset 0 0 0 12px #35A6EB;
    }

    &:checked + div > div {
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px #206FAD;
    }

    /* Green */
    &.green:checked + div {
        border: 1px solid rgba(0, 162, 63,1);
        box-shadow: inset 0 0 0 12px #54B350;
    }

    &.green:checked:focus + div {
        box-shadow: 0px 0px 3px 2px #91baed, inset 0 0 0 12px #54B350;
    }

    &.green:checked + div > div {
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63, 1);
    }
}

input[type=range] {
    height: 5px;
    -webkit-appearance: none;
    margin: 10px 0 0 0;
    width: 120px;
    border: none !important;
    background-color: transparent !important;
    &:focus {
        outline: none !important;
    }
    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000;
        background: #E8E8E8;
        border-radius: 0px;
        border: 0px solid #000000;
    }
    &::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px #000000;
        border: 1px solid #2290D9;
        height: 13px;
        width: 13px;
        border-radius: 25px;
        background: #D0DBF2;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -5px;
    }
    &:focus::-webkit-slider-runnable-track {
        background: #E8E8E8;
    }
    &::-moz-range-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000;
        background: #E8E8E8;
        border-radius: 0px;
        border: 0px solid #000000;
    }
    &::-moz-range-thumb {
        box-shadow: 0px 0px 0px #000000;
        border: 1px solid #2290D9;
        height: 13px;
        width: 13px;
        border-radius: 25px;
        background: #D0DBF2;
        cursor: pointer;
    }
    &::-ms-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    &::-ms-fill-lower {
        background: #E8E8E8;
        border: 0px solid #000000;
        border-radius: 0px;
        box-shadow: 0px 0px 0px #000000;
    }
    &::-ms-fill-upper {
        background: #E8E8E8;
        border: 0px solid #000000;
        border-radius: 0px;
        box-shadow: 0px 0px 0px #000000;
    }
    &::-ms-thumb {
        margin-top: 1px;
        box-shadow: 0px 0px 0px #000000;
        border: 1px solid #2290D9;
        height: 13px;
        width: 13px;
        border-radius: 25px;
        background: #D0DBF2;
        cursor: pointer;
    }
    &:focus::-ms-fill-lower {
        background: #E8E8E8;
    }
    &:focus::-ms-fill-upper {
        background: #E8E8E8;
    }
}

/*************************************************
* ---- Common Classes ----
*/

.w2ui-marker {
    background-color: rgba(214, 161, 252, 50%);
}

.w2ui-spinner {
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: @image-spinner;
}

/* common icons */

.w2ui-icon {
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    overflow: hidden;
    margin: 2px 2px;
    display: inline-block;

    &.icon-folder {
        .background-image(@image-folder, no-repeat, center);
    }

    &.icon-page {
        .background-image(@image-page, no-repeat, center);
    }
}

/*************************************************
* ---- Locking portion of the screen (in grid, form, layout)
*/

.w2ui-lock {
    display: none;
    position: absolute;
    z-index: 1400;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .opacity(0.15);
    background-color: @lock-background-color;
}

.w2ui-lock-msg {
    display: none;
    position: absolute;
    z-index: 1400;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100px;
    max-width: 95%;
    padding: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
    font-family: @main-font-family;
    opacity: 0.8;
    background-color: @lock-msg-background-color;
    color: @lock-msg-color;
    text-align: center;
    border-radius: 5px;
    border: @lock-msg-border;
    .w2ui-spinner {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: -3px 8px -7px -10px;
    }
}

/*************************************************
* ---- Scroll contet, used in toolbar and tabs ----
*/

.w2ui-scroll-wrapper {
    overflow: hidden;
}

.w2ui-scroll-left,
.w2ui-scroll-right {
    top: 0;
    width: 18px;
    height: 100%;
    cursor: default;
    z-index: 10;
    display: none;
    position: absolute;

    &:hover {
        background-color: @overflow-hover-background-color;
    }
}

.w2ui-scroll-left {
    left: 0;
    box-shadow: 0px 0px 7px #5F5F5F;
    background: @overflow-background-color @image-less center center no-repeat;
    background-size: 15px 12px;
}

.w2ui-scroll-right {
    right: 0;
    box-shadow: 0px 0px 7px #5F5F5F;
    background: @overflow-background-color @image-more center center no-repeat;
    background-size: 15px 13px;
}

/*************************************
* ---- Notification message ----
*/

#w2ui-notify {
    pointer-events: none; // it should not be blocking events unless it is on the message
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0px;
    right: 0px;
    bottom: 15px;
    z-index: 10000;
    overflow: hidden;
    > div {
        pointer-events: all;
        position: relative;
        background-color: #292828ba;
        color: #ffffff;
        padding: 8px 44px 8px 16px;
        border-radius: 4px;
        box-shadow: 3px 3px 10px #9c9c9c;
        max-height: 76px;
        min-width: 100px;
        max-width: 800px;
        font-size: 16px;
        text-shadow: 1px 0 0 black;

        a {
            color: #6cd0e8;
            text-decoration: none;
            cursor: pointer;
        }
        a:hover {
            color: #a2f0ff;
        }
       span.w2ui-notify-close {
            padding: 6px 6px;
            border-radius: 3px;
            font-size: 13px;
            color: #c3c3c3;
            position: absolute;
            right: 5px;
            top: 3px;
            &:hover {
                background-color: #807e7e;
                color: #ffffff;
            }

        }
        &.w2ui-notify-error {
            text-shadow: none;
            background-color: rgba(255, 0, 0, 0.8) ;
            .w2ui-notify-close {
                color: #ffffff ;
                &:hover {
                    background-color: #fcadad;
                    color: rgba(255, 0, 0, 0.8);
                }
            }
        }
    }
}
